<template>
  <div class="columns-list">
    <div class="top-nav">
      <p class="nav-title">专栏管理 > 专栏内容维护</p>
    </div>
    <div class="issue-list" v-if="false">
      <div class="issue-select">
        <ul>
          <li>
            <router-link :to="'/columns/journal/1/1'">第一期</router-link>
          </li>
          <li>
            <router-link :to="'/columns/journal/1/2'">第二期</router-link>
          </li>
          <li>
            <router-link :to="'/columns/journal/1/3'">第三期</router-link>
          </li>
        </ul>
      </div>
      <div class="create-issue">
        <router-link :to="'/columns/create/price/1'">新建售卖周期</router-link>
      </div>
    </div>
    <div class="content-module">
      <div class="publish">
        <div class="publish-btn" @click="publishContent">发布</div>
        <span v-if="type==1">本期为 {{startTime}} 至 {{endTime}} 的内容</span>
      </div>
      <div class="content-list">
        <content-item v-for="item in contentList" :content="item" @deleteclick="onDelete" :key="item.id"></content-item>
      </div>
      <div class="page-control">
        <span class="prev-btn" @click="prevBtn()">上一页</span>
        <span class="page-btn" :class="activePage(n)" v-for="n in totalCount" @click="toPage(n)">{{n}}</span>
        <span class="next-btn" @click="nextBtn()">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as types from '../../../store/mutation-types';
import contentItem from './ContentItem.vue';
import Tools from 'utils/tools.js';

export default {
  name: 'contentList',
  data(){
    return {
      type:2,//所属专栏类别 1|期刊专栏 2|课程包专栏
      startTime:"",
      endTime:"",
      specialColumnId:"",
      coursePacketId:"",
      page:1,//当前页码
      size:5//每页条数
    }
  },
  components:{
    "content-item":contentItem
  },
  created(){
    this.specialColumnId = this.$route.params.id;
    this.coursePacketId = this.$route.params.issue;

    this.$store.dispatch('setSpecialColumnId',this.specialColumnId);
    this.$store.dispatch('setCoursePacketId',this.coursePacketId);

    this.$store.dispatch('loadContentList',{specialColumnId:this.specialColumnId,coursePacketId:this.coursePacketId,page:this.page,size:this.size});

    //获取课程包详情
    this.$store.dispatch('editPrice',this.coursePacketId).then((res)=>{
      this.type = res.type;
      if(res.type){
        this.startTime = Tools.dateFormat(res.startTime, 'yyyy-MM-dd');
        this.endTime = Tools.dateFormat(res.endTime, 'yyyy-MM-dd');
      }
    })
  },
  computed:{
    contentList() {
      return this.$store.state.content.contentList;
    },
    totalCount() {//总页数
      return this.$store.state.content.totalCount && Math.ceil(this.$store.state.content.totalCount/this.size);
    }
  },
  methods:{
    onDelete(){
      this.$store.dispatch('loadContentList',{specialColumnId:this.specialColumnId,coursePacketId:this.coursePacketId,page:this.page,size:this.size});
    },
    publishContent(){
      this.$router.push(`/columns/journal/${this.specialColumnId}/${this.coursePacketId}/publish`);
    },
    prevBtn(){
      if(this.page > 1){
        this.page = this.page - 1;
        this.$store.dispatch('loadContentList',{specialColumnId:this.specialColumnId,coursePacketId:this.coursePacketId,page:this.page,size:this.size});
      }
    },
    nextBtn(){
      if(this.page < this.totalCount){
        this.page = this.page + 1;
        this.$store.dispatch('loadContentList',{specialColumnId:this.specialColumnId,coursePacketId:this.coursePacketId,page:this.page,size:this.size});
      }
    },
    toPage(index){
      this.page = index;
      this.$store.dispatch('loadContentList',{specialColumnId:this.specialColumnId,coursePacketId:this.coursePacketId,page:index,size:this.size});
    },
    activePage(index) {
      return {
        "active":this.page == index
      }
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
.columns-list{
  .top-nav{
    height: 40px;
    border-bottom: 1px solid #2e9057;
    .nav-title{
      font-size: 20px;
      color: #2e9057;
    }
  }
  .issue-list{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #777;
    margin-bottom: 18px;
    .issue-select{
      border-radius: 5px;
      overflow: hidden;
      display: inline-block;
      font-size: 0;
      li{
        display: inline-block;
        width: 118px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background: #f0f0f0;
        font-size: 16px;
        a {
            transition: .2s ease;
            width: 100%;
            height: 100%;
            display: inline-block;
            color: #999999;
        }
        .router-link-active {
            background: #2e9057;
            color: #fff;
        }
      }
    }
    .create-issue{
      height: 40px;
      line-height: 40px;
      position: absolute;
      right: 0;
      top: 10px;
      padding: 0 15px;
      background: #2e9057;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      a{
        color: #fff;
      }
    }
  }
  .content-module{
    margin-top: 20px;
    .publish{
      .publish-btn{
        width: 100px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        padding: 0 15px;
        background: #2e9057;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
      }
      span{
        vertical-align: bottom;
        margin-left: 10px;
        font-size: 16px;
      }
    }
    .page-control{
      margin-top: 20px;
      text-align: center;
      span{
        border: 1px solid #aaa;
        color: #333;
        margin: 0 3px;
        padding: 0 10px;
        text-decoration: none;
        border-radius: 4px;
        color: #666;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        &:hover{
          background:#eee;
        }
        &.active{
          background:#206740;
          border: 1px solid #206740;
          color: #fff;
        }
      }
    }
  }
}
</style>
